<template>
  <page-header-wrapper
    :tab-list="tabList"
    :tab-active-key="tabActiveKey"
    :tab-change="(key) => {
      this.tabActiveKey = key
    }"
  >
    <a-row gutter="24">
      <a-card
        title=""
        style="margin-bottom: 24px"
        :bordered="false"
        :body-style="{ padding: 0 }"
      >
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="content">搜索：
            <a-input type="text" v-model="searchKey"/>
          </div>
        </a-col>
        <span class="search">
          <a-button style="margin-top : 10px;margin-left:200px" type="primary" @click="search()">查询</a-button>
          <a-button style="margin-left: 8px" @click="refresh()">重置</a-button>
        </span>
      </a-card>
    </a-row>
    <a-row gutter="24">
      <a-card
        title=""
        style="margin-bottom: 24px"
        :bordered="false"
        :body-style="{ padding: 0 }"
      >
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <input type="radio" class="radio" value="-1" v-model="typeFilter" name="radio"/>
          <label class="chose" >全部</label>
          <input type="radio" class="radio" value="0" v-model="typeFilter" name="radio"/>
          <label class="chose">图片</label>
          <input type="radio" class="radio" value="1" v-model="typeFilter" name="radio"/>
          <label class="chose">视频</label>
          <input type="radio" class="radio" value="2" v-model="typeFilter" name="radio"/>
          <label class="chose">音频</label>
          <input type="radio" class="radio" value="3" v-model="typeFilter" name="radio"/>
          <label class="chose">艺术</label>
          <input type="radio" class="radio" value="4" v-model="typeFilter" name="radio"/>
          <label class="chose">党建</label>
        </a-col>
        <span class="search">
          <a-button v-if="chosed.length==0" style="margin-left:150px" :disabled="chosed.length==0" @click="chosenone()">取消选择</a-button>
          <a-button v-if="chosed.length!=0" style="margin-left:150px" :disabled="chosed.length==0" type="primary" @click="chosenone()">取消选择</a-button>
          <a-button style="margin-left: 8px" type="primary" @click="choseall()">全选</a-button>
          <a-button v-if="chosed.length==0" style="margin-left: 8px" :disabled="chosed.length==0">批量删除</a-button>
          <a-button v-if="chosed.length!=0" style="margin-left: 8px" :disabled="chosed.length==0" type="primary">批量删除</a-button>
          <a-button type="primary" style="margin-left: 8px" @click="open()">新建文件夹</a-button>
          <a-button type="primary" style="margin-left: 8px" @click="open1()">上传素材</a-button>
        </span>
      </a-card>
    </a-row>
    <a-row gutter="24" >
      <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <div v-if="searchKey.length===0&&typechanged === false|| issearch===false&&typechanged === false">
          <a-list
            rowKey="id"
            :grid="{gutter: 24, lg: 6, md: 2, sm: 1, xs: 1}"
            :dataSource="dataSource"
            class="card-list"
          >
            <a-list-item slot="renderItem" slot-scope="item" >
              <template>
                <a-card :hoverable="true" @click="chose(item.id)" @mouseover="Mouseover(item.id)" @mouseleave="Mouseleave(item.id)">
                  <a-card-meta>
                    <a-avatar class="card-avatar" slot="avatar" :src="avatar" size="large"/>
                    <a-avatar v-if="item.isChosed" class="card-avatar1" slot="avatar" :src="avatar1" size="large"/>
                    <div class="meta-content" slot="description">{{ item.name }}</div>
                  </a-card-meta>

                </a-card>
              </template>
              <div v-if="dataSource[item.id-1].isShow === true &&dataSource[item.id-1].isDocumentation === true">
                <div class="hover-box" slot="description">
                  <li class="font"><a href="">打开</a></li>
                  <li class="font"><a href="">重命名</a></li>
                  <li class="font"><a href="">删除</a></li>
                </div>
              </div>
              <div v-if="dataSource[item.id-1].isShow === true &&dataSource[item.id-1].isDocumentation === false">
                <div class="hover-box" slot="description">
                  <li class="font"><a href="">预览</a></li>
                  <li class="font"><a href="">重命名</a></li>
                  <li class="font"><a href="">移动到</a></li>
                  <li class="font"><a href="">下载</a></li>
                  <li class="font"><a href="">删除</a></li>
                </div>
              </div>
            </a-list-item>
          </a-list>
        </div>
        <div v-if="searchKey.length!==0&& issearch===true||typechanged === true">
          <a-list
            rowKey="id"
            :grid="{gutter: 24, lg: 6, md: 2, sm: 1, xs: 1}"
            :dataSource="searched"
            class="card-list"
          >
            <a-list-item slot="renderItem" slot-scope="item" >
              <template>
                <a-card :hoverable="true" @click="chose(item.id)" @mouseover="Mouseover(item.id)" @mouseleave="Mouseleave(item.id)">
                  <a-card-meta>
                    <a-avatar class="card-avatar" slot="avatar" :src="avatar" size="large"/>
                    <a-avatar v-if="item.isChosed" class="card-avatar1" slot="avatar" :src="avatar1" size="large"/>
                    <div class="meta-content" slot="description">{{ item.name }}</div>
                  </a-card-meta>

                </a-card>
              </template>
              <div v-if="dataSource[item.id-1].isShow === true &&dataSource[item.id-1].isDocumentation === true">
                <div class="hover-box" slot="description">
                  <li class="font"><a href="">打开</a></li>
                  <li class="font"><a href="">重命名</a></li>
                  <li class="font"><a href="">删除</a></li>
                </div>
              </div>
              <div v-if="dataSource[item.id-1].isShow === true &&dataSource[item.id-1].isDocumentation === false">
                <div class="hover-box" slot="description">
                  <li class="font"><a href="">预览</a></li>
                  <li class="font"><a href="">重命名</a></li>
                  <li class="font"><a href="">移动到</a></li>
                  <li class="font"><a href="">下载</a></li>
                  <li class="font"><a href="">删除</a></li>
                </div>
              </div>
            </a-list-item>
          </a-list>
        </div>
      </a-col>
    </a-row>
    <teleport to="body">
      <!-- to后面的地址还可以是 html  或者其他 div等 -->
      <!-- 表示将teleport包裹的这个div,移动到html这个结构中 -->
      <div class="mask" v-if="showDialog">
        <div class="dialog1">
          文件名<a-input type="text" v-model="documentname" class="documentname"/>
          请选择存放文件类型<select v-model="documenttype">
            <option value="0">图片</option>
            <option value="1">视频</option>
            <option value="2">音频</option>
            <option value="3">艺术</option>
            <option value="4">党建</option>
          </select>
          <a-button class="dialog-btn" @click="close">关闭弹窗</a-button>
          <a-button @click="createdocument()" :disabled="documentname===''||documenttype===''">创建文件夹</a-button>
        </div>
      </div>
    </teleport>
    <teleport to="body">
      <!-- to后面的地址还可以是 html  或者其他 div等 -->
      <!-- 表示将teleport包裹的这个div,移动到html这个结构中 -->
      <div class="mask" v-if="showDialog1">
        <a-list
          rowKey="id"
          :grid="{gutter: 24, lg: 6, md: 2, sm: 1, xs: 1}"
          :dataSource="dataSource"
          class="card-list"
        >
          <a-list-item slot="renderItem" slot-scope="item" >
            <template>
              <a-card :hoverable="true" @click="chose(item.id)">
                <a-card-meta>
                  <a-avatar class="card-avatar" slot="avatar" :src="avatar" size="large"/>
                  <a-avatar v-if="item.isChosed" class="card-avatar1" slot="avatar" :src="avatar1" size="large"/>
                  <div class="meta-content" slot="description">{{ item.name }}</div>
                </a-card-meta>

              </a-card>
            </template>
          </a-list-item>
        </a-list>
        <div class="dialog1">
          <input/>
          <a-button class="dialog-btn" @click="close1()">关闭弹窗</a-button>
          <a-input type="file" v-model="material">选择素材</a-input>
          <a-button @click="upload()">上传素材</a-button>
        </div>
      </div>
    </teleport>
  </page-header-wrapper>
</template>

<script>

 import { reactive, toRefs, ref, watch, onMounted } from '@vue/composition-api'
import { createMkdir, getDocument } from '@/api/index.js'
export default {
  setup () {
    const state = reactive({
      material: '', // 选择的素材
      documentname: '', // 创建的文件名
      documenttype: '', // 创建的文件类型
      showDialog: false, // 创建文件的弹出框
      showDialog1: false, // 上传素材的弹出框
      z: [], // 保存搜索时的数据
      c: [],
      typechanged: false,
      searched: [],
      issearch: false,
      chosed: [],
      tabActiveKey: 'tab1',
      avatar: require('../../assets/文件.jpg'),
      avatar1: require('../../assets/对勾.png'),
      document: [],
       dataSource: [
      //    {
      //   id: 1,
      //   name: '1',
      //   isChosed: false,
      //   isShow: false,
      //   isDocumentation: true,
      //   type: '0'
      // },
      // {
      //   id: 2,
      //   name: '2',
      //   isChosed: false,
      //   isShow: false,
      //   isDocumentation: false,
      //   type: '1'
      // },
      // {
      //   id: 3,
      //   name: '12',
      //   isChosed: false,
      //   isShow: false,
      //   isDocumentation: false,
      //   type: '1'
      //  }
      ]
    })
    // const creatdocument = async () => {
    // }
    onMounted(() => {
      state.dataSource = getDocument()
      alert(state.dataSource[0])
    })
    const upload = () => {
      // if(state.material.split('.')[1])
    }
    const open = () => {
      state.showDialog = true
    }
    const open1 = () => {
      state.showDialog1 = true
    }
    const close = () => {
      state.showDialog = false
    }
    const close1 = () => {
      state.showDialog1 = false
    }
    const createdocument = () => {
      createMkdir(state.documentname)
    }
    const Mouseover = (x) => {
      state.dataSource[x - 1].isShow = true
      state.searched[x - 1].isShow = true
    }
    const Mouseleave = (x) => {
      state.dataSource[x - 1].isShow = false
      state.searched[x - 1].isShow = true
    }
    // const chose = (x) => {
    //   if (state.searched === []) {
    //     state.dataSource[x - 1].isChosed = !state.dataSource[x - 1].isChosed
    //     if (state.dataSource[x - 1].isChosed === true) {
    //       state.chosed.push(state.dataSource[x - 1])
    //     } else {
    //       state.chosed = state.chosed.filter(item => item !== state.dataSource[x - 1])
    //     }
    //   } else {
    //     state.searched[x - 1].isChosed = !state.searched[x - 1].isChosed
    //     if (state.searched[x - 1].isChosed === true) {
    //       state.chosed.push(state.searched[x - 1])
    //     } else {
    //       state.chosed = state.chosed.filter(item => item !== state.searched[x - 1])
    //     }
    //   }
    // }
    // const choseall = () => {
    //   let i = 0
    //   if (state.searched === []) {
    //     for (i = 0; i < state.dataSource.length; i++) {
    //       state.chosed.push(state.dataSource[i])
    //       state.dataSource[i].isChosed = true
    //     }
    //   } else {
    //     for (i = 0; i < state.searched.length; i++) {
    //       state.chosed.push(state.searched[i])
    //       state.searched[i].isChosed = true
    //     }
    //   }
    // }
    // const chosenone = () => {
    //    let i
    //   for (i = state.chosed.length; i > 0; i--) {
    //     state.chosed = state.chosed.filter(item => item !== state.dataSource[i - 1])
    //     state.dataSource[i - 1].isChosed = false
    //   }
    // }
     const typeFilter = ref('-1')
      watch(typeFilter, (newValue, oldValue) => {
        if (state.issearch === true) { // 已经搜索关键字了
          if (newValue !== '-1') {
            state.typechanged = true
            if (state.searched.length !== 0) {
              const b = []
              for (const a of state.z) {
                if (a.type.search(newValue) !== -1) {
                  b.push(a)
                }
              }
              state.searched = b
            } else {
              const b = []
              for (const a of state.z) {
                if (a.type.search(newValue) !== -1) {
                  b.push(a)
                }
              }
              state.searched = b
            }
          } else if (newValue === '-1') {
            state.searched = state.z
          }
        } else { // 未搜索
          if (newValue !== '-1') {
            state.typechanged = true
            if (state.searched.length !== 0) {
              const b = []
              for (const a of state.dataSource) {
                if (a.type.search(newValue) !== -1) {
                  b.push(a)
                }
              }
              state.searched = b
            } else {
              const b = []
              for (const a of state.dataSource) {
                if (a.type.search(newValue) !== -1) {
                  b.push(a)
                }
              }
              state.searched = b
            }
          } else if (newValue === '-1') {
            state.searched = state.dataSource
          }
        }
      })
    const searchKey = ref('')
    const search = () => {
      state.issearch = false
      if (state.typechanged === true) { // 已经先单选了
          state.issearch = !state.issearch
          for (const a of state.searched) {
            if (a.name.search(searchKey.value) !== -1) {
              state.c.push(a)
            }
          }
           state.searched = state.c
          //  alert(state.c[0].name)
      } else if (state.typechanged === false) { // 直接搜索
            state.searched = []
          if (searchKey.value.length === 0) {
            state.searched = []
          } else {
            state.issearch = !state.issearch
            for (const a of state.dataSource) {
              if (a.name.search(searchKey.value) !== -1) {
                state.searched.push(a)
              }
            }
            state.z = state.searched
            Array.from(new Set(state.z))
          }
      }
      // if (searchKey.value.length === 0) {
      //   state.searched = []
      // } else {
      //   state.issearch = !state.issearch
      //   for (const a of state.dataSource) {
      //     if (a.name.search(searchKey.value) !== -1) {
      //       state.searched.push(a)
      //     }
      //   }
      //    state.z = state.searched
      //   Array.from(new Set(state.z))
      // }
    }
    const refresh = () => {
      state.issearch = false
      state.searched = []
      typeFilter.value = '-1'
      state.typechanged = false
    }
    return {
      ...toRefs(state),
      Mouseover,
      Mouseleave,
      // chose,
      // choseall,
      // chosenone,
      search,
      searchKey,
      refresh,
      typeFilter,
      open,
      close,
      open1,
      close1,
      createdocument,
      upload
    }
  }
}
</script>

<style lang="less" scoped>
  @import "~@/components/index.less";

  .card-list {
    /deep/ .ant-card-body:hover {
      .ant-card-meta-title>a {
        color: @primary-color;
      }
    }

    /deep/ .ant-card-meta-title {
      margin-bottom: 12px;

      &>a {
        display: inline-block;
        max-width: 100%;
        color: rgba(0,0,0,.85);
      }
    }

    /deep/ .meta-content {
      // position: relative;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // height: 64px;
      // -webkit-line-clamp: 3;
      // -webkit-box-orient: vertical;
      font-size: 20px;
      font-weight: 900;
      // margin-bottom: 1em;
    }
  }

  .card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    margin-left: 20px;
  }
  .card-avatar1 {
    width:20px;
    height: 20px;
    float: left;
  }
  .new-btn {
    background-color: #fff;
    border-radius: 2px;
    width: 100%;
    height: 188px;
  }
  .hover-box{
    background: #fff;
    a{
      color: #000;
      font-size: 15px;
      display: flex;
      justify-content: center;
      padding-top: 5px;
      padding-bottom: 5px;
      font-weight: 900;
    }
  }
.chose{
  padding-left: 5px;
  padding-right: 10px;
}
.mask{
  /* 创建遮罩层 */
  position: absolute;
  background: #fff;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.dialog1 {
  text-align: center;
  width: 300px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* top和left这个两个50%表示的是，这个弹框的顶部到页面的顶部，弹框的左侧到页面的左侧 */
  transform: translate(-50%,-50%);
  /* 这个偏移表示的是，偏移这个div框自身宽度和高度的50% */
}
</style>
